<template>
  <div class="upload">
    <Breadcrumb style="float: left">
      <BreadcrumbItem>用户平台</BreadcrumbItem>
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>资源上传</BreadcrumbItem>
    </Breadcrumb>
    <div class="clear"></div>
    <Upload multiple type="drag" action="//jsonplaceholder.typicode.com/posts/">
      <div style="padding: 20px 0 height: 800px">
        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
        <p>拖拽文件即可上传</p>
      </div>
    </Upload>
    <Table border :columns="columns1" :data="data1" ref="selection">
      <template slot-scope="{ row }" slot="name">
        <strong>{{ row.name }}</strong>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <!-- <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</Button> -->
        <Button type="error" size="small" @click="remove(index)">删除</Button>
      </template>
    </Table>
    <Button @click="handleSelectAll(true)" class="left">全选</Button>
    <Button @click="handleSelectAll(false)" class="left">取消全选</Button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      columns1: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '文件名',
          key: 'filename'
        },
        {
          title: '上传用户',
          key: 'user'
        },
        {
          title: '上传时间',
          key: 'data'
        },
        {
          title: 'Action',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      data1: [
        {
          filename: 'test',
          user: 'admin',
          data: '2020-08-18'
        }
      ]
    }
  },
  methods: {
    // show (index) {
    //     this.$Modal.info({
    //         title: 'User Info',
    //         content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
    //     })
    // },
    remove (index) {
      this.data1.splice(index, 1)
    },
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    }
  }
}
</script>

<style lang="scss" scoped>
.upload {
  text-align: center;
}
.clear {
  clear: both;
}
.left {
  float: left;
}
</style>
